<!DOCTYPE html>
<html>
<head>
	<title>反转图片颜色</title>
	<meta charset="utf-8" />
	<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
	<script type="text/javascript">
		var img = new Image();
		img.src = "images/back.jpg";
		$(img).load(function(){
			restore();
		});

		function restore(){
			var cv = $("#cv");
			var ctx = cv.get(0).getContext("2d");
			ctx.drawImage(img,0,0,cv.width(),cv.height());
		}

		function fz(){
			var cv = $("#cv");
			var ctx = cv.get(0).getContext("2d");
			var data = ctx.getImageData(0,0,cv.width(),cv.height());
			var pixels = data.data;
			ctx.clearRect(0,0,cv.width(),cv.height());
			for(var i = 0;i < pixels.length;i++){
				pixels[i*4] = 255 - pixels[i*4];
				pixels[i*4+1] = 255 - pixels[i*4+1];
				pixels[i*4+2] = 255 - pixels[i*4+2];
			}
			ctx.putImageData(data,0,0);
		}

		function hd(){
			var cv = $("#cv");
			var ctx = cv.get(0).getContext("2d");
			var data = ctx.getImageData(0,0,cv.width(),cv.height());
			var pixels = data.data;
			ctx.clearRect(0,0,cv.width(),cv.height());
			for(var i = 0;i < pixels.length;i++){
				var avg = (pixels[i*4]+pixels[i*4+1]+pixels[i*4+2])/3;
				pixels[i*4] = pixels[i*4+1] = pixels[i*4+2] = avg;
			}
			ctx.putImageData(data,0,0);
		}

		function xsh(draw_f_or_y){
			var cv = $("#cv");
			var ctx = cv.get(0).getContext("2d");
			var data = ctx.getImageData(0,0,cv.width(),cv.height());
			var pixels = data.data;
			ctx.clearRect(0,0,cv.width(),cv.height());

			var rows_count = cols_count = 100;
			var item_w = data.width/cols_count;
			var item_h = data.height/rows_count;
			for(var r = 0;r < rows_count;r++){
				for(var c = 0;c < cols_count;c++){
					var x = (c * item_w) + (item_w/2);
					var y = (r * item_h) + (item_h/2);
					var pos = (Math.floor(y)*(data.width*4))+(Math.floor(x)*4)
					var red = pixels[pos];
					var green = pixels[pos+1];
					var blue = pixels[pos+2];
					ctx.fillStyle = "rgb("+red+","+green+","+blue+")";
					if(draw_f_or_y === "f")
						ctx.fillRect(x-(item_w/2),y-(item_h/2),item_w,item_h);
					else if(draw_f_or_y === "y"){
						ctx.beginPath();
						ctx.arc(x,y,item_w/2,0,Math.PI*2,false);
						ctx.closePath();
						ctx.fill();
					}
				}
			}
		}

		$(window).ready(function(){
			/*
			$("#cv").click(function(e){
				var cv = $("#cv");
				var ctx = cv.get(0).getContext("2d");
				var data = ctx.getImageData(0,0,cv.width(),cv.height());
				var pixels = data.data;
				ctx.clearRect(0,0,cv.width(),cv.height());
				for(var i = 0;i < pixels.length;i++){
					pixels[i*4] = 255 - pixels[i*4];
					pixels[i*4+1] = 255 - pixels[i*4+1];
					pixels[i*4+2] = 255 - pixels[i*4+2];
				}
				ctx.putImageData(data,0,0);
			});
			*/
			//firefox貌似不支持jquery的attr设置checked的方法
			//$("#chked").attr("checked",true);
			//safari是支持的，chrome也支持，但chrome要求关闭同源策略安全后才能获取到
			//本地html同一目录下的图片数据。
			//遂使用标准的DOM方法
			chked.checked = true;
			$("input[name='option']").click(function(){
				var val = $(this).attr("value");
				switch(val){
					case 'restore':restore();
						break;
					case 'fz':fz();
						break;
					case 'hd':hd();
						break;
					case 'xs_f':xsh("f");
						break;
					case 'xs_y':xsh("y");
						break;
				}
			});
		});
	</script>
	<style type="text/css">
	#options{
		display:inline-block;
	}
	#cv{
		display: block;
	}
	</style>
</head>
<body>
<h1>反转图片Demo</h1>
<h3 style="color:red;">请选择要操作的图片功能</h3>
<fieldset id="options">
	<legend>选择功能</legend>
	<input id="chked" type="radio" name="option" value="restore" checked="checked" /> 原始图片 <br />
	<input type="radio" name="option" value="fz" /> 反转颜色 <br />
	<input type="radio" name="option" value="hd" /> 灰度 <br />
	<input type="radio" name="option" value="xs_f" /> 像素化(方块) <br />
	<input type="radio" name="option" value="xs_y" /> 像素化(圆形) <br />
</fieldset>
<canvas id="cv" width="900" height="800"></canvas>
</body>
</html>